<template>
  <div>
    <Search></Search>
    <ShopHeader></ShopHeader>
    <!-- <GoodsDetailNav></GoodsDetailNav> -->
    <div class="shop-item-path">
      <div class="shop-nav-container">
        <Breadcrumb>
          <BreadcrumbItem to="/">首页</BreadcrumbItem>
          <!-- <BreadcrumbItem to="/goodsList">手机壳</BreadcrumbItem> -->
          <!-- <BreadcrumbItem>手机保护套</BreadcrumbItem> -->
        </Breadcrumb>
      </div>
    </div>
    <!-- 商品信息展示 -->
    <ShowGoods :DetailGood="DetailGood" :Images="Images"></ShowGoods>
    <!-- 商品详细展示 -->
    <ShowGoodsDetail :Images="Images"></ShowGoodsDetail>
    <Spin size="large" fix v-if="isLoading"></Spin>
  </div>
</template>

<script>
import Search from '@/components/Search';
import GoodsDetailNav from '@/components/nav/GoodsDetailNav';
import ShopHeader from '@/components/header/ShopHeader';
import ShowGoods from '@/components/goodsDetail/ShowGoods';
import ShowGoodsDetail from '@/components/goodsDetail/ShowGoodsDetail';
import store from '@/vuex/store';
import { mapState, mapActions } from 'vuex';
export default {
  name: 'GoodsDetail',
  beforeRouteEnter(to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  created() {
    this.loadGoodsInfo();
    this.getDetailGood();
    this.getImages();
  },
  data() {
    return {
      tagsColor: ['blue', 'green', 'red', 'yellow'],
      DetailGood: {},
      Images: []
    };
  },
  methods: {
    ...mapActions(['loadGoodsInfo']),
    getDetailGood() {
      // console.log('getDetailGood', this.$route.query.gid);
      this.$axios({
        method: 'get',
        url: `/product/goods/info/${this.$route.query.gid}`
      })
        .then(({ data }) => {
          console.log('getDetailGood', data);
          this.DetailGood = data.goods;
        })
        .catch(error => console.log(error));
    },
    getImages() {
      this.$axios({
        method: 'get',
        url: `/product/goodimages/info/${this.$route.query.gid}`
      })
        .then(({ data }) => {
          console.log('getImages', data);
          this.Images = data.goodImages;
        })
        .catch(error => console.log(error));
    }
  },
  computed: {
    ...mapState(['goodsInfo', 'isLoading'])
  },
  components: {
    Search,
    ShopHeader,
    GoodsDetailNav,
    ShowGoods,
    ShowGoodsDetail
  },
  store
};
</script>

<style scoped>
.shop-item-path {
  height: 38px;
  background-color: rgb(236, 235, 235);
  line-height: 38px;
  color: #2c2c2c;
}
.shop-nav-container {
  margin: 0px auto;
  width: 80%;
}
</style>
